```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>30DaysOfJavaScript | 30天掌握JavaScript实战</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #2d3748;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
            color: #1a202c;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .drop-cap:first-letter {
            font-size: 3.5em;
            float: left;
            line-height: 0.8;
            margin-right: 0.1em;
            margin-bottom: -0.1em;
            font-weight: 700;
            color: #667eea;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white min-h-screen flex items-center relative overflow-hidden">
        <div class="absolute inset-0 bg-black opacity-30"></div>
        <div class="container mx-auto px-6 py-24 relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">30天掌握JavaScript实战</h1>
                <p class="text-xl md:text-2xl mb-10 font-light opacity-90">通过30个精心设计的项目，从零开始构建你的JavaScript技能树</p>
                <div class="flex flex-col md:flex-row justify-center gap-4">
                    <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" class="bg-white text-indigo-700 px-8 py-3 rounded-lg font-semibold text-lg hover:bg-gray-100 transition duration-300 shadow-lg flex items-center justify-center gap-2">
                        <i class="fab fa-github"></i> 访问GitHub
                    </a>
                    <a href="https://30daysofjs.netlify.app/" class="bg-transparent border-2 border-white px-8 py-3 rounded-lg font-semibold text-lg hover:bg-white hover:text-indigo-700 transition duration-300 flex items-center justify-center gap-2">
                        <i class="fas fa-external-link-alt"></i> 查看演示
                    </a>
                </div>
            </div>
        </div>
        <div class="absolute bottom-10 left-0 right-0 flex justify-center animate-bounce">
            <i class="fas fa-chevron-down text-white text-2xl"></i>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-3xl font-bold text-center mb-12">为什么选择30DaysOfJavaScript？</h2>
                <p class="drop-cap text-lg text-gray-700 mb-8">
                    许多JavaScript学习者在学习过程中面临理论知识与实践应用脱节的问题。传统的教程往往只关注语法概念，缺乏实际项目经验，导致学习者无法将所学知识应用到真实开发场景中。同时，很多开发者缺乏系统性的项目练习，难以建立完整的编程思维。
                </p>
                <p class="text-lg text-gray-700 mb-8">
                    30DaysOfJavaScript通过提供30个精心设计的项目，从简单的DOM操作到复杂的Web应用，让学习者在实践中掌握JavaScript的核心概念和实际应用技巧。
                </p>
                <div class="flex justify-center mt-10">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1754966231815-f4b9ca1b-2554-47e6-8685-4439bf3ff3b0.png" alt="30DaysOfJavaScript项目截图" class="rounded-lg shadow-xl border border-gray-200 max-w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-16">核心功能与优势</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">渐进式学习路径</h3>
                    <p class="text-gray-600">项目难度从基础到高级逐步递进，确保学习者能够循序渐进地掌握技能，从简单的DOM操作到复杂的Web应用开发。</p>
                </div>
                <!-- Feature 2 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">完整项目源码</h3>
                    <p class="text-gray-600">每个项目都提供完整的HTML、CSS、JavaScript代码，可以直接运行和修改，帮助理解实际开发中的代码结构。</p>
                </div>
                <!-- Feature 3 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">在线演示平台</h3>
                    <p class="text-gray-600">通过Netlify部署的在线演示网站，可以实时查看所有项目效果，无需本地运行即可预览学习成果。</p>
                </div>
                <!-- Feature 4 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">开源协作</h3>
                    <p class="text-gray-600">基于GitHub的开源项目，支持社区贡献和持续改进，学习最新最佳实践。</p>
                </div>
                <!-- Feature 5 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">跨平台兼容</h3>
                    <p class="text-gray-600">所有项目都基于标准Web技术，无需额外环境配置，在任何设备上都能学习和实践。</p>
                </div>
                <!-- Feature 6 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">项目导向学习</h3>
                    <p class="text-gray-600">不是枯燥的理论讲解，而是通过实际项目来学习，更符合现代编程教育理念，学习效果更好。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Learning Path Visualization -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">学习路径可视化</h2>
            <div class="max-w-4xl mx-auto bg-gray-50 p-8 rounded-xl">
                <div class="mermaid">
                    graph LR
                    A[基础DOM操作] --> B[事件处理]
                    B --> C[表单验证]
                    C --> D[API调用]
                    D --> E[小型应用]
                    E --> F[高级项目]
                    style A fill:#667eea,color:#fff
                    style F fill:#764ba2,color:#fff
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">适用场景</h2>
            <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <!-- Use Case 1 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md border-t-4 border-indigo-500">
                    <div class="text-3xl mb-4 text-indigo-500">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">个人技能提升</h3>
                    <p class="text-gray-600 mb-4">对于有一定JavaScript基础但缺乏项目经验的开发者，可以按照项目列表逐一完成，每个项目都能巩固特定知识点。</p>
                    <ul class="text-gray-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>DOM操作与事件处理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>API调用与数据处理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>小型Web应用开发</span>
                        </li>
                    </ul>
                </div>
                <!-- Use Case 2 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md border-t-4 border-purple-500">
                    <div class="text-3xl mb-4 text-purple-500">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">教学辅助工具</h3>
                    <p class="text-gray-600 mb-4">编程教师可以将这些项目作为教学案例，学生通过模仿和修改项目代码来理解JavaScript的实际应用。</p>
                    <ul class="text-gray-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>直观的代码示例</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>分步骤学习路径</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>可扩展的项目基础</span>
                        </li>
                    </ul>
                </div>
                <!-- Use Case 3 -->
                <div class="card-hover bg-white p-8 rounded-xl shadow-md border-t-4 border-blue-500">
                    <div class="text-3xl mb-4 text-blue-500">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">面试准备</h3>
                    <p class="text-gray-600 mb-4">求职者可以通过完成这些项目来丰富个人作品集，展示JavaScript编程能力和项目经验。</p>
                    <ul class="text-gray-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>多样化项目展示</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>实际问题解决能力</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>GitHub作品集建设</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-3xl font-bold text-center mb-12">快速上手指南</h2>
                <div class="space-y-8">
                    <!-- Step 1 -->
                    <div class="flex flex-col md:flex-row gap-6">
                        <div class="bg-indigo-100 text-indigo-700 w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold flex-shrink-0">
                            1
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">访问项目仓库</h3>
                            <p class="text-gray-600">打开 <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" class="text-indigo-600 hover:underline">GitHub仓库</a>，查看项目结构和README文件，了解项目概况和学习路线。</p>
                        </div>
                    </div>
                    <!-- Step 2 -->
                    <div class="flex flex-col md:flex-row gap-6">
                        <div class="bg-indigo-100 text-indigo-700 w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold flex-shrink-0">
                            2
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">克隆或下载项目</h3>
                            <p class="text-gray-600">使用 <code class="bg-gray-100 px-2 py-1 rounded">git clone</code> 命令或直接下载ZIP文件到本地开发环境。</p>
                        </div>
                    </div>
                    <!-- Step 3 -->
                    <div class="flex flex-col md:flex-row gap-6">
                        <div class="bg-indigo-100 text-indigo-700 w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold flex-shrink-0">
                            3
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">选择起始项目</h3>
                            <p class="text-gray-600">从Day 1开始，按照项目列表顺序进行学习，每个项目都有独立的文件夹和详细说明。</p>
                        </div>
                    </div>
                    <!-- Step 4 -->
                    <div class="flex flex-col md:flex-row gap-6">
                        <div class="bg-indigo-100 text-indigo-700 w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold flex-shrink-0">
                            4
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">运行和修改</h3>
                            <p class="text-gray-600">在浏览器中打开项目的HTML文件，查看效果，然后尝试修改代码来深入理解实现原理。</p>
                        </div>
                    </div>
                    <!-- Step 5 -->
                    <div class="flex flex-col md:flex-row gap-6">
                        <div class="bg-indigo-100 text-indigo-700 w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold flex-shrink-0">
                            5
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">在线预览</h3>
                            <p class="text-gray-600">访问 <a href="https://30daysofjs.netlify.app/" class="text-indigo-600 hover:underline">在线演示网站</a> 查看所有项目的运行效果，快速浏览学习内容。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-indigo-700 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold mb-6">准备好开始你的JavaScript之旅了吗？</h2>
            <p class="text-xl mb-10 max-w-2xl mx-auto opacity-90">现在就开始30天的挑战，每天一个项目，30天后你将成为一个更优秀的JavaScript开发者！</p>
            <div class="flex flex-col md:flex-row justify-center gap-4">
                <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" class="bg-white text-indigo-700 px-8 py-3 rounded-lg font-semibold text-lg hover:bg-gray-100 transition duration-300 shadow-lg flex items-center justify-center gap-2">
                    <i class="fab fa-github"></i> 立即开始学习
                </a>
                <a href="https://30daysofjs.netlify.app/" class="bg-transparent border-2 border-white px-8 py-3 rounded-lg font-semibold text-lg hover:bg-white hover:text-indigo-700 transition duration-300 flex items-center justify-center gap-2">
                    <i class="fas fa-external-link-alt"></i> 预览项目效果
                </a>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            fontFamily: 'Noto Sans SC, sans-serif',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 添加平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 添加卡片悬停动画
        const cards = document.querySelectorAll('.card-hover');
        cards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-5px)';
                card.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)';
            });
            card.addEventListener('mouseleave', () => {
                card.style.transform = '';
                card.style.boxShadow = '';
            });
        });
    </script>
</body>
</html>
```